<template>
  <div>
    <!-- 导航栏 start -->
    <van-nav-bar title="用户登录" right-text="" left-arrow fixed @click-left="onClickLeft" />
    <!-- 导航栏 end -->

    <!-- 内容 -->
    <div class="login">
      <!-- 验证码登录 -->
      <van-form @submit="onSmsSubmit" class="form" v-show="loginType == 1">
        <div class="title">
          <span>验证码登录/注册</span>
          <sub>首次登录将自动注册</sub>
        </div>
        <van-field v-model="smslogin_phone" maxlength="11" size="large" type="tel" name="手机号" placeholder="手机号" :rules="[{ required: true, message: '请填写手机号' }]" style="font-size: 16px" />
        <van-field v-model="smslogin_code" maxlength="6" type="number" size="large" center clearable placeholder="验证码" style="font-size: 16px" :rules="[{ required: true, message: '请填写验证码' }]">
          <template #button>
            <van-button size="small" type="primary" class="yzm" native-type="button" :disabled="enable_btn_getzym" :loading="loading_btn_getzym" @click="onGetYZM">
              {{ btn_getyzm_title }}
            </van-button>
          </template>
        </van-field>
        <van-field name="checkbox" class="read">
          <template #input>
            <van-checkbox v-model="checked_xy" checked-color="#05A6F0" icon-size="16px">
              <span>我同意</span>
            </van-checkbox>
						 <a @click="onUserXY('xy')">《舟山人才网用户协议》</a>
              <a @click="onUserXY('zc')">《隐私政策》</a>
          </template>
        </van-field>
        <div class="btns">
          <van-button :loading="loading_smsSubmit" round block type="info" native-type="submit">登录/注册</van-button>
        </div>
        <div class="link" style="justify-content: center" @click="loginType = 2">
          <a>账号密码登录</a>
        </div>
      </van-form>

      <!-- 密码登录 -->
      <van-form @submit="onPwdSubmit" class="form" v-show="loginType == 2">
        <div class="title">
          <span>账号密码登录</span>
        </div>
        <van-field v-model="pwdlogin_username" size="large" name="手机号" placeholder="手机号/邮箱/用户名" :rules="[{ required: true, message: '请填写手机号/邮箱/用户名' }]" style="font-size: 16px" />
        <van-field v-model="pwdlogin_pwd" size="large" type="password" name="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" style="font-size: 16px" />
        <van-field name="checkbox" class="read">
          <template #input>
            <van-checkbox v-model="checked_xy" checked-color="#05A6F0" icon-size="16px">
              <span>我同意</span>
            </van-checkbox>
						<a @click="onUserXY('xy')">《舟山人才网用户协议》</a>
            <a @click="onUserXY('zc')">《隐私政策》</a>
          </template>
        </van-field>
        <div class="btns">
          <van-button round block type="info" native-type="submit" :loading="loading_pwdSubmit" :disabled="enable_pwdSubmit">登录
          </van-button>
        </div>
        <div class="link" style="justify-content: center">
          <a @click="loginType = 1">验证码登录</a>
          <!-- <a>忘记密码</a> -->
        </div>
      </van-form>

      <!-- 第三方登录 -->
      <dl class="other" v-if="false">
        <dt>其他方式登录</dt>
        <dd>
          <p @click="onWXLogin">
            <img src="@/assets/img/my/wx-ico.png" />
            <span>微信</span>
          </p>
          <p v-if="false" @click="onAppleLogin">
            <img src="@/assets/img/my/ios-ico.png" />
            <span>AppleID</span>
          </p>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
import { Toast, NavBar, Icon, Form, Field, Button, Checkbox, CheckboxGroup } from "vant";
import { addPersonLoginData, addPersonAutoLoginData } from "@/util/session";
import { mixin_validate, mixin_person_toCreateResume, mixin_wx, } from "@/mixin/mixins";
import { getPlatform, returnToPhoneWithData } from "@/util/phone";
import Global from "@/Global";
export default {
  name: "LoginIndex",
  components: {
    [Button.name]: Button,
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [Form.name]: Form,
    [Field.name]: Field,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
  },
  mixins: [mixin_validate, mixin_person_toCreateResume, mixin_wx],
  // 定义属性
  data() {
    return {
      loginType: 1, //0用户名密码登录 1短信登录
      btn_getyzm_title: "获取验证码", //获取验证码按钮文字
      enable_btn_getzym: false,
      loading_btn_getzym: false,
      checked_xy: false, //协议
      smslogin_phone: "", //
      smslogin_code: "",
      loading_smsSubmit: false,
      loading_pwdSubmit: false, //用户名密码登录-提交按钮 是否处于提交状态
      pwdlogin_username: "", //用户名密码登录 用户名
      pwdlogin_pwd: "", //用户名密码登录 密码
      platform: '',
    };
  },
  created() {
    window.doWXLogin = this.doWXLogin;
    window.doAppleLogin = this.doAppleLogin;
    this.platform = getPlatform();
  },
  computed: {
    //用户名密码登录-提交按钮 是否处于禁用状态
    enable_pwdSubmit() {
      if (this.pwdlogin_username.length > 0 && this.pwdlogin_pwd.length > 0)
        return false;
      else return true;
    },
  },
  // 方法集合
  methods: {
    //协议
    onUserXY(type) {
      this.$router.push({ name: "person-login-xy", query: { type } });
    },
    //获取验证码
    async onGetYZM() {
      if (this.smslogin_phone.length === 0) {
        Toast("请输入手机号");
        return;
      }
      if (!this.validate_phone.test(this.smslogin_phone)) {
        Toast("手机号格式不正确");
        return;
      }
      this.loading_btn_getzym = true;
      this.$api.get("/PersonAccount/SendPhoneCode", { mobileNum: this.smslogin_phone }).then((res) => {
        this.loading_btn_getzym = false;
        Toast(res.msg);
        if (res.success) {
          this.getYZMSuccess();
        }
      });
    },
    //验证码倒计时
    getYZMSuccess() {
      let count = 60;
      let timmer = setInterval(() => {
        console.log("timmer");
        this.btn_getyzm_title = `${count}s`;
        this.enable_btn_getzym = true;
        count--;
        if (count < 0) {
          this.btn_getyzm_title = "获取验证码";
          this.enable_btn_getzym = false;
          clearInterval(timmer);
        }
      }, 1000);
    },
    //用户名密码登录
    onPwdSubmit() {
      if (!this.checked_xy) {
        Toast("请同意用户协议");
        return;
      }
      this.loading_pwdSubmit = true;
      this.$api.post("/PersonAccount/Login", { loginType: 0, userName: this.pwdlogin_username, passWord: this.pwdlogin_pwd }).then((res) => {
        this.loading_pwdSubmit = false;
        Toast(res.msg);
        if (res.success) {
          this.loginSuccess(res.response);
        }
      });
    },
    //验证码登录
    onSmsSubmit() {
      if (!this.checked_xy) {
        Toast("请同意用户协议");
        return;
      }
      if (!this.validate_phone.test(this.smslogin_phone)) {
        Toast("手机号格式不正确");
        return;
      }
      this.loading_smsSubmit = true;
      this.$api.post('/PersonAccount/Login', { loginType: 1, vcode: this.smslogin_code, mobileNum: this.smslogin_phone }).then(res => {
        this.loading_smsSubmit = false;
        Toast(res.msg);
        if (res.success) {
          this.loginSuccess(res.response);
        }
      })
    },
    //登录成功处理
    loginSuccess(loginResponse) {
      if (!loginResponse) return;
      if (loginResponse.resumeID == '') {
        this.$router.push({ name: 'person-resume-resumequick1' });
      }
      else
        this.$router.replace({ name: 'person-main' });
      //save person's account data for this login
      addPersonLoginData(loginResponse.personID, loginResponse.token, loginResponse.mobileNum, loginResponse.resumeID);
      //save login's data for auto login
      addPersonAutoLoginData(loginResponse.loginName,loginResponse.passwordEncrypt);
      this.$bus.$emit(Global.bus_person_login, true);
      this.$bus.$emit(Global.bus_person_im_refresh, true);
      // //jim web login
      // myJmessage.login(loginResponse.personID, '');
      // this.$chathub.bindConnID(loginResponse.personID,loginResponse.token);
      this.$chathub.init(this.$root,loginResponse.personID,loginResponse.token);
			//jim app login
      returnToPhoneWithData({ action: 'person_im_login', personid: loginResponse.personID })
    },
    //APP微信登录
    onWXLogin() {
			if (!this.checked_xy) {
        Toast("请同意用户协议");
        return;
      }
      returnToPhoneWithData({
        action: "person_wx_login",
      });
    },
    onAppleLogin() {
			if (!this.checked_xy) { Toast('请同意用户协议'); return; }
      returnToPhoneWithData({
        action: "person_apple_login",
      });
    },
    //微信登录
    doWXLogin(wxUnionID) {
			if (!this.checked_xy) {
        Toast("请同意用户协议");
        return;
      }
      this.$api.post('/PersonAccount/LoginWithWechat', wxUnionID).then(res => {
        Toast(res.msg)
        if (res.success) {
          this.loginSuccess(res.response);
        }
      })
    },
    //Apple登录
    doAppleLogin(idOrMsg, isSuccess) {
      if (isSuccess) {
        this.$api.post('/PersonAccount/LoginWithApple', idOrMsg).then(res => {
          Toast(res.msg)
          if (res.success) {
            this.loginSuccess(res.response);
          }
        })
      }
      else { Toast(idOrMsg) }
    }
  },
};
</script>

<style lang="less">
@import "vant/lib/index.less";
@import "@/assets/css/common.less";

.login {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.login .form {
  padding: 46px 15px 0;
}

.login .title {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0 30px;
}

.login .title span {
  font-size: 20px;
}

.login .title sub {
  margin-top: 8px;
  font-size: 13px;
  color: #c8c8c8;
}

.login .yzm {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 9px;
  background-color: #e6f6fd;
  border: none;
  border-radius: 20px;
  font-size: 13px;
  color: #05a6f0;
  line-height: 26px;
}

.login .read {
  padding: 20px 16px 10px;
}

.login .read::after {
  content: "";
  display: none;
}

.login .read span,
.login .read a {
  font-size: 13px;
  color: #666;
}

.login .btns {
  display: flex;
  padding: 20px 16px 0;
}

.login .btns button {
  background-color: #05a6f0;
  border: none;
  font-size: 18px;
}

.login .link {
  display: flex;
  padding: 20px 16px 0;
}

.login .link a {
  font-size: 15px;
  color: #666;
}

.login .other {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 36px;
}

.login .other dt {
  font-size: 14px;
  color: #c8c8c8;
}

.login .other dd {
  display: flex;
  margin: 20px 0 0;
}

.login .other dd p {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0 25px;
}

.login .other dd p img {
  width: 50px;
  height: 50px;
  margin-bottom: 8px;
}

.login .other dd p span {
  font-size: 13px;
  color: #666;
}
</style>
